import { Button, Checkbox, Form, Input, Card, message } from "antd";
import HeaderCom from "./Header";
import homeCss from "./css/home.module.less";
import "./css/fade.css";

import Side from "./Side";
import { Route, Routes, Outlet, useLocation, useBeforeUnload, useNavigate } from "react-router-dom";
import NormalTable from "../table/normalTable";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import React, { useRef, useMemo, useEffect, useCallback } from "react";
import TabsView from "./tabsGetMeuns";
import { routerArr } from "../../router/router";
import { getUser } from "@/api/user";
export default function HomeDom() {
  const [messageApi, contextHolder] = message.useMessage();

  const navigate = useNavigate();

  let Location = useLocation();
  let cssRef = useRef(null);
  const { pathname } = useLocation();
  const getMenus = (routes) => {
    let menus = [];
    function getMenuItem(route) {
      route.forEach((item) => {
        if (item.children && item.children.length) getMenuItem(item.children);
        else {
          // 排除默认路由
          if (item.path) menus.push(item);
        }
      });
    }
    getMenuItem(routes);
    return menus;
  };
  const formatRoutes = useMemo(() => {
    return getMenus(routerArr);

    // return [{ title: "首页", path: "/home", element: <HomeDom /> }].concat(getMenus(routerArr));
  }, []);
  console.log(formatRoutes);
  const selectTab = useCallback(
    (key) => {
      navigate(key);
    },
    [navigate]
  );
  useEffect(() => {
    if (pathname != "/login" && localStorage.getItem("userId")) {
      console.log(Location, "Location");
      console.log(pathname, "pathname");
    } else {
      navigate("/login");
      messageApi.info("身份过期");
    }
  }, [Location]);

  useEffect(() => {
    getUser().then((res) => {
      console.log(res);
    });
  }, []);
  return (
    <>
      <div className={homeCss.root}>
        {contextHolder}

        <HeaderCom></HeaderCom>
        <div className={homeCss.body}>
          <Side></Side>
          <div className={homeCss.content}>
            <TabsView pathname={pathname} formatRoutes={formatRoutes} selectTab={selectTab} />
            <SwitchTransition>
              <CSSTransition unmountOnExit={true} nodeRef={cssRef} key={Location.key} timeout={300} classNames="fade">
                <Card key={Location.key} ref={cssRef} className={homeCss.card}>
                  <Outlet />
                </Card>
              </CSSTransition>
            </SwitchTransition>
          </div>
        </div>
      </div>
    </>
  );
}
